{extend name="base" /}
{block name="css"}
<style>
        body{
            margin: 0;
            background-color: <?php echo $string;?>;
            background-image: url("/static/libs/images/bg.jpg");
        }
</style>
<link rel="stylesheet" media="screen" href="{__CSS__}/css/login.css?v={:rand_number()}"/>    

<style>
.heart {
    width: 25px;
    height: 25px;
    margin: 0 auto;
    background-color: {$string};
 
    position: relative;
    box-shadow: 0 0 20px {$string};
    animation: beat .7s linear infinite alternate;
}

.heart::before, .heart::after {
    position: absolute;
    content: " ";
    width: 25px;
    height: 25px;
    left: 0;
    border-radius: 50%;
    background-color: inherit;
    box-shadow: 0 0 20px {$string};
}

.heart::before{
    
    top: -50%;
}
.heart::after {
    left:50%;
}
@keyframes beat {
            0%{transform: rotate(-45deg) scale(0.5);}
            20%{transform: rotate(-45deg) scale(0.8);}
            40%{transform: rotate(-45deg) scale(1.1);}
            60%{transform: rotate(-45deg) scale(1.4);}
            80%{transform: rotate(-45deg) scale(1.7);}
            100%{transform: rotate(-45deg) scale(2.0);}
}
</style>
     
   <style>
    #submitBtn {
      background-color: gray;
    }

    #submitBtn.enabled {
      background-color: red;
    }
    #saveBtn {
      background-color: gray;
    }

    #saveBtn.enabled {
      background-color: red;
    }
  </style>    

{/block}
{block name="body"}
{include file="common/header" /}
<div class="loginwrapper">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title layui-select-none">
    <li class="layui-this">{:__('User binding')}</li>
    <li>{:__('User registration')}</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
 <div class="login-wrapper">
    <div class="heart"></div>

    <form name="form" id="login-form" class="layui-form" method="POST" action="{:url('qqlogin/auth')}">
          
        <div class="layui-form-item login-oauth-group">
            <div>
                <img src={$image} style="width: 40px; height: 40px; border:none;border-radius:50px;"> <i>{:__('Hello!')} <font color="#ff0000">{$name}</font> {:__('QQ authorization successful!')}</i>
            </div>
         </div>  
        <input type="hidden" name="openid" value="{$openid}" id="openid">
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-username"></i>
            <input class="layui-input" name="name" id="name" placeholder="{:__('Please input')}" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-password"></i>
            <input class="layui-input" name="pass" id="pass" placeholder="{:__('Please enter the login password')}" type="password"
                   lay-verType="tips" lay-verify="required" required/>
        </div>
        
                <div class="layui-form-item layui-input-icon-group login-captcha-group">
            <i class="layui-icon layui-icon-auz"></i>
            <input class="layui-input" name="captcha" id="captcha" placeholder="{:__('Please enter the verification code')}" autocomplete="off"
                   lay-verType="tips" lay-verify="required" required/>
            <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}?rand='+Math.random()" class="login-captcha" />
        </div>
        <div class="layui-form-item">
            <input type="submit" class="layui-btn-fluid" lay-filter="bindsave" lay-submit value="{:__('Sign in now')}" id="saveBtn" disabled>
        </div>
    </form>
</div>
</div>
    <div class="layui-tab-item">
<div class="login-wrapper">      
 <div class="heart"></div>
                  <form id="login_form" class="layui-form" action="" method="post" onsubmit="return false;">
       
                     <input type="hidden" name="verification" value="0" id="verification">
                     <input type="hidden" name="openid" value="<?php echo base64_encode($openid);?>" id="openid">
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-username"></i>
            <input class="layui-input" name="username" id="username" value="{$name}" placeholder="{:__('enter one user name')}" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-password"></i>
            <input class="layui-input" name="password" id="password" placeholder="{:__('Please enter the login password')}" type="password" lay-verType="tips" lay-verify="required" required/>
        </div>
        {if seo('email')=='1'}
         <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-email"></i>
            <input type="text" class="layui-input" name="email" id="email" placeholder="{:__('Please input email')}" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
        {/if}
        {if seo('mobile')=='1'}
        <div class="layui-form-item layui-input-icon-group">
            <i class="layui-icon layui-icon-cellphone"></i>
            <input type="text" class="layui-input" name="mobile" id="mobile" placeholder="{:__('Please input mobile phone number')}" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
        </div>
        {/if}
        {if seo('useryzm')=='1'}
                <div class="layui-form-item layui-input-icon-group login-captcha-group">
            <i class="layui-icon layui-icon-auz">eeee</i>
            <input type="text" class="layui-input" name="captcha" id="captcha" placeholder="{:__('Please enter the verification code')}" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
            <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}?rand='+Math.random()" class="login-captcha" />
        </div>
       {/if}
               
        <div class="layui-form-item">
          <button type="submit" class="layui-btn layui-btn-fluid" lay-filter="saveregister" lay-submit title="{:__('Register now')}" id="submitBtn" disabled>{:__('Register now')}</button>
        </div>
        
    </form>
      </div>  
    </div>
  </div>
</div> 
</div>  
 
{/block}   
{block name="js"}
 
  <script>
    const name = document.getElementById('name');
    const pass = document.getElementById('pass');
    const captcha = document.getElementById('captcha');
    const saveBtn = document.getElementById('saveBtn');

    name.addEventListener('input', checkInputs);
    pass.addEventListener('input', checkInputs);
    captcha.addEventListener('input', checkInputs);

    function checkInputs() {
      if (name.value && pass.value && captcha.value) {
        saveBtn.disabled = false; 
        saveBtn.classList.add('enabled');
      } else {
        saveBtn.classList.remove('enabled');
        saveBtn.disabled = true;
      }
    }
  </script>

  <script>
    const username = document.getElementById('username');
    const email = document.getElementById('email');
    const mobile = document.getElementById('mobile');
    const password = document.getElementById('password');
    const submitBtn = document.getElementById('submitBtn');

    username.addEventListener('input', checkInputs);
    email.addEventListener('input', checkInputs);
    mobile.addEventListener('input', checkInputs);
    password.addEventListener('input', checkInputs);

    function checkInputs() {
      if (username.value && email.value && mobile.value && password.value) {
        submitBtn.disabled = false; 
        submitBtn.classList.add('enabled');
      } else {
        submitBtn.classList.remove('enabled');
        submitBtn.disabled = true;
      }
    }
  </script>

<script>
      layui.use(['layer', 'form', 'jquery'], function(){
        var layer = layui.layer,
            form  = layui.form,
            $     = layui.jquery;
        //表单提交
           form.on('submit(bindsave)', function (data) {
    var index = layer.msg('<i>{:__('Binding, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 4
    });

    $.ajax({
        url: data.form.action,
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 1) {
                setTimeout(function () {
                        location.href = result.url;
                    //parent.location.reload();
                }, 1000);
           
            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});  
//表单提交
         form.on('submit(saveregister)', function (data) {
    var index = layer.msg('{:__('Registration, please wait')}', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 1
    });

    $.ajax({
         url: "{:url('user/register')}",
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
                setTimeout(function () {
                        location.href = result.url;
                    //parent.location.reload();
                }, 1000);
           
            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});
});
</script>
{include file="common/footer" /}
{/block}